{% extends "UserBundle::layout.html.twig" %}

{% trans_default_domain 'FOSUserBundle' %}


{% block header %}
    {{ parent() }}

	<div class="twelve columns">
		<div class="row">
			<div class="formulario custom five columns form-wrapper">
				<div>
					{% if error %}
                        <div class="twelve columns alert-box alert errors">
						    <div>{{ error|trans }}</div>
                        </div>
					{% endif %}
					<div>
						<p class="lead">Amistades formales con <strong>Amistate</strong><br>¡Haz amigos, charla, comparte aficiones con gente nueva!</p>
					</div>
						
					{% for flashMessage in app.session.flashbag.get('error') %}
						<div data-alert="" class="alert-box alert round">
							<ul>
								<li>{{ flashMessage }}</li>
							</ul>
							<a href="" class="close">×</a>
						</div>
					{% endfor %}

					<form action="{{ path("fos_user_security_check") }}" method="post">
						<input type="hidden" name="_csrf_token" value="{{ csrf_token }}" />
						<div class="row">
							<div class="three mobile-four columns">
								<label class="right inline required" for="username">Email</label>
							</div>
							<div class="nine mobile-four columns">
								<input type="text" id="username" name="_username" required="required" class="expand" value="{{app.session.get('_security.last_username')}}">
							</div>
						</div>
						
						<div class="row">
							<div class="three mobile-four columns">
								<label class="right inline required" for="password">Contraseña</label>
							</div>
							<div class="nine mobile-four columns">
								<input type="password" id="password" name="_password" required="required" class="expand">
							</div>
						</div>
						
						<div class="row">
							<div class="three mobile-four columns">
								<label for="remember_me">{{ 'security.login.remember_me'|trans }}</label>
							</div>
							<div class="nine mobile-four columns">
								<input type="checkbox" id="remember_me" checked="true" name="_remember_me" value="on" />
							</div>
						</div>
						
						<div class="row">
							<div class="seven offset-by-five columns">
								<button id="_submit" name="_submit" type="submit" class="button radius"><i class="icon-heart"></i> &nbsp;{{ 'security.login.submit'|trans }}</button>
							</div>
						</div>

					</form>
				</div>
				<!--Search form-->
				

				


			  <!--Form footer-->
			</div><!--end form-wrapper-->
		</div><!--end row-->
	</div>
{% endblock %}

{% block classPage %}page wide-style{% endblock %}


{% block body %}
	
<section>
	<style>
			#main{padding: 0px;}
	</style>
	<div id="call-to-actions" class="silver-bg">
		<div class="row map-bg">
			<div class="twelve columns">
				<h1 class="section-title">Todo comienza con una <span class="pink-text">Amistad</span></h1>
				<p class="lead">
					Por fin nos has encontrado. Más de <span class="pink-text">{{data.total}}</span> en todo el mundo ya compartían la misma experiencia y utiliza nuestro sistema. <strong class="black-text">Con nosotros hoy es más fácil!</strong>
				</p>
        
			</div><!--end twelve-->

			<!--Status Icons-->
			<div class="status three columns mobile-one">
				<div class="icon" data-animation="pulse">
					{% image '@AmistateBundle/Resources/public/images/icons/steps/status_01.png' %}
						<img src="{{ asset_url }}" width="213" height="149" alt="Usuarios Reales">
					{% endimage %}
				</div>
				<ul class="block-grid">
					<li class="title">{{data.total}}</li>
					<li class="subtitle">Usuarios Reales</li>
				</ul>
			</div>
        
			<div class="status three columns mobile-one">
				<div class="icon" data-animation="pulse">
					{% image '@AmistateBundle/Resources/public/images/icons/steps/status_02.png' %}
						<img src="{{ asset_url }}" width="213" height="149" alt="Usuarios online">
					{% endimage %}
				</div>
				<ul class="block-grid">
					<li class="title">{{'%.0f'|format(data.total/4)}}</li>
					<li class="subtitle">Usuarios online</li>
				</ul>
			</div>
        
			<div class="status three columns mobile-one">
				<div class="icon" data-animation="pulse">
					{% image '@AmistateBundle/Resources/public/images/icons/steps/status_03.png' %}
						<img src="{{ asset_url }}" width="213" height="149" alt="Mujeres online">
					{% endimage %}
				</div>
				<ul class="block-grid">
					<li class="title">{{data.facets.true}}</li>
					<li class="subtitle">Mujeres online</li>
				</ul>
			</div>
        
			<div class="status three columns mobile-one">
				<div class="icon" data-animation="pulse">
					{% image '@AmistateBundle/Resources/public/images/icons/steps/status_04.png' %}
						<img src="{{ asset_url }}" width="213" height="149" alt="Hombres online">
					{% endimage %}
				</div>
				<ul class="block-grid">
					<li class="title">{{data.facets.false}}</li>
					<li class="subtitle">Hombres online</li>
				</ul>
			</div>
      
    </div><!--end row map-bg-->
  </div><!--end call-to-actions-->
</section>
{% endblock %}